<template>
  <view class="bg-white min-h-100vh p-4">
    <u-divider text="涉案记录"></u-divider>
    <view v-if="dataList.length">
      <view
        v-for="i in dataList"
        :key="i.CaseID"
        class="rounded-4px text-first text-14px p-10px -mx-15px"
        style="border-bottom: 1px #ccc solid"
      >
        <view class="flex">
          <text>民警：{{ i.OfficerName }}</text>
          <text class="mx-20px">案件号：{{ i.CaseNumber }}</text>
          <text
            class="flex-1 text-right"
            :style="{
              color: i.Color
            }"
          >
            {{ i.Status }}
          </text>
        </view>
        <view class="my-10px">时间：{{ i.StartDate }}~{{ i.EndDate }}</view>
        <view style="line-height: 18px">说明：{{ i.Description }}</view>
        <view class="mt-10px">
          涉案物品：
          <text style="color: #409eff" @click="handleLook(i.CaseID)">
            点击查看
          </text>
        </view>
      </view>
    </view>
    <u-empty v-else mode="data" />

    <u-popup closeOnClickOverlay :show="popupShow" @close="popupShow = false">
      <view class="h-80vh p-10px">
        <view v-if="casePropList.length">
          <view
            v-for="i in casePropList"
            :key="i.PropertyID"
            class="rounded-4px text-first text-14px p-10px -mx-15px"
            style="border-bottom: 1px #ccc solid"
          >
            <view class="flex items-center">
              <text>存放间：{{ i.StorageLocation }}</text>
              <text
                class="flex-1 text-right"
                :style="{
                  color: i.Color
                }"
              >
                {{ i.Status }}
              </text>
            </view>
            <view style="line-height: 18px" class="mt-10px">
              说明：{{ i.Description }}
            </view>
          </view>
        </view>
        <view v-else class="mt-100px">
          <u-empty mode="data" />
        </view>

        <u-form
          label-position="left"
          ref="uForm"
          :model="formData"
          :rules="{
            Status: {
              type: 'string',
              required: true,
              message: '请选择',
              trigger: ['blur', 'blur']
            },
            StorageLocation: {
              type: 'string',
              required: true,
              message: '请输入',
              trigger: ['change', 'blur']
            },
            Description: {
              type: 'string',
              required: true,
              message: '请输入',
              trigger: ['change', 'blur']
            }
          }"
        >
          <u-form-item
            label="物品状态"
            prop="Status"
            border-bottom
            label-width="80"
            required
            @click="spropStatus = true"
          >
            <picker
              :show="spropStatus"
              :range="StatusMap"
              range-key="label"
              header-text="请选择物品状态"
              @change="handleSelectPropStatus"
            >
              <u-input
                v-model="formData.Status"
                disabled
                disabledColor="#ffffff"
                placeholder="请选择物品状态"
                border="none"
              ></u-input>
            </picker>
            <u-icon slot="right" name="arrow-right"></u-icon>
          </u-form-item>
          <u-form-item
            label="物品存放处"
            prop="StorageLocation"
            border-bottom
            label-width="80"
            required
            border="none"
          >
            <u-input
              v-model="formData.StorageLocation"
              type="textarea"
              disabledColor="#ffffff"
              placeholder="请输入"
            ></u-input>
          </u-form-item>
          <u-form-item
            label="物品详情"
            prop="Description"
            border-bottom
            required
            label-width="80"
          >
            <u-textarea
              v-model="formData.Description"
              type="textarea"
              disabledColor="#ffffff"
              placeholder="请输入"
            ></u-textarea>
          </u-form-item>
        </u-form>
        <view>
          <u-button
            text="提交"
            color="#386ee8"
            class="mt-10px"
            :throttle-time="600"
            :loading="btnLoading"
            @click="handleSubmit"
          />
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import dayjs from 'dayjs'
import {
  getCasePropRecordsApi,
  getCaseRecordsApi,
  postCasePropApi
} from './service'
import { showToast } from '@/utils'

@Component({ name: 'CaseThing' })
export default class OnGuard extends Vue {
  readonly StatusMap = [
    {
      label: '暂存',
      value: 'InStorage'
    },
    {
      label: '退还',
      value: 'Returned'
    },
    {
      label: '销毁',
      value: 'Destroyed'
    }
  ]
  popupShow = false
  btnLoading = false
  spropStatus = false

  formData = {
    CaseID: '',
    Description: '',
    StorageLocation: '',
    Status: ''
  }
  casePropList: Recordable = []
  async handleLook(CaseID: string) {
    this.formData.CaseID = CaseID
    this.popupShow = true
    const { records } = await getCasePropRecordsApi({ CaseID })
    this.casePropList = []
    this.casePropList = records.map((i: any) => {
      return {
        ...i,
        Status:
          i.Status === 'InStorage'
            ? '暂存'
            : i.Status === 'Returned'
            ? '退还'
            : '销毁',
        Color: i.Status === 'Destroyed' ? '#F56C6C' : '#F9AE3D'
      }
    })
  }

  handleSelectPropStatus({ detail: { value } }: any) {
    this.formData.Status = String(this.StatusMap[value].label)
  }

  async handleSubmit() {
    try {
      await (this.$refs.uForm as any).validate()
      uni.showLoading({ title: '加载中...' })
      await postCasePropApi({
        ...this.formData,
        Status: this.StatusMap.find((i) => i.label === this.formData.Status)
          ?.value
      })
      await showToast({ title: '提交成功' })
      await this.handleLook(this.formData.CaseID)

      this.formData = {
        CaseID: this.formData.CaseID,
        Description: '',
        StorageLocation: '',
        Status: ''
      }
    } finally {
      uni.hideLoading()
    }
  }

  dataList: Recordable = []
  async onLoad() {
    const { records } = await getCaseRecordsApi()
    this.dataList = records.map((o: any) => {
      return {
        ...o,
        StartDate: dayjs(o.StartDate).format('YYYY-MM-DD'),
        EndDate: o.EndDate
          ? dayjs(o.EndDate).format('YYYY-MM-DD')
          : '调查中...',
        Status: o.Status === 'Ongoing' ? '未结案' : '结案',
        Color: o.Status === 'Ongoing' ? '#F9AE3D' : '#5AC725'
      }
    })
  }
}
</script>

<style lang="scss" scoped></style>
